﻿@{
    ViewBag.Title = "ko高级案列";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
    <script type="text/javascript" src="~/Content/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="~/Content/js/core/knockout-2.2.1.js"></script>
    <script src="~/Content/js/jquery/jquery-tmpl.js"></script>
    <script type="text/javascript">

        //function formatCurrency(value) { return "$" + value.toFixed(2); }


        //var sampleProductCategories = [
        //{ name: '水果', products: '蜜桃', price: 8.5 },        
        //{ name: '蔬菜', products: '土豆', price: 3.95 },      
        //{ name: '肉类', products: '牛肉', price: 18.50 },
       
        //];
        ////var product = [
        ////{ name: '蜜桃', price: 8.5 },
        ////{ name: '苹果', price: 3.95 },
        ////{ name: '橙子', price: 18.50 }
        ////];
        //var model  =  {
        //    category: ko.observable(sampleProductCategories[0])      
        //};
        //var model2 = {
        //    product: ko.observable(sampleProductCategories[1], sampleProductCategories[2])
        //}

        ////ko.applyBindings(model);
        ////var sampleProductCategories = {
        ////    items: ko.observableArray([{ name: "水果", rank: 1 }, { name: "蔬菜", rank: 2 }, { name: "肉类", rank: 3 }]),
        ////    selectedValue: ko.observable()
        ////}
        //var cartLine = function () {
        //    this.category = ko.observable(model);
        //    this.product = ko.observable(model2);
        //    this.quantity = ko.observable(1);
        //    this.subtotal = ko.dependentObservable(function () {
        //        return this.product() ? this.product().price * parseInt("0" + this.quantity(), 10) : 0;
        //    }.bind(this));

        //    // Whenever the category changes, reset the product selection
        //    this.category.subscribe(function () { this.product(undefined); }.bind(this));
        //};

        //var cart = function () {
        //    // Stores an array of lines, and from these, can work out the grandTotal
        //    this.lines = ko.observableArray([new cartLine()]);   // Put one line in by default    

           
        ////    this.sampleProductCategories= ko.observableArray([
        ////{ name: '水果', product:[{ name: '蜜桃', price: 8.5 }] },
        ////{ name: '蔬菜', product:[{ name: '土豆', price: 3.95 }] },
        ////{ name: '肉类', product:[{ name: '牛肉', price: 18.95 }] }
        ////]),

        //    this.grandTotal = ko.dependentObservable(function () {
        //        var total = 0;
        //        for (var i = 0; i < this.lines().length; i++)
        //            total += this.lines()[i].subtotal();
        //        return total;
        //    }.bind(this));

        //    // Operations
        //    this.addLine = function () { this.lines.push(new cartLine()) };
        //    this.removeLine = function (line) { this.lines.remove(line) };

        //    this.save = function () {
        //        var dataToSave = $.map(this.lines(), function (line) {
        //            return line.product() ? { productName: line.product().name, quantity: line.quantity() } : undefined
        //        });

        //        alert("Could now send this to server: " + JSON.stringify(dataToSave));
        //    };
        //};

        //var cartViewModel = new cart();

        //ko.applyBindings(cartViewModel, document.getElementById("cartEditor"));
    </script>
    <script type="text/javascript">

        var Page = Page || {};
        Page.Utility = Page.Utility || {};
        Page.Utility.Registration = Page.Utility.Registration || {};
        //获取密码强度
        Page.Utility.Registration.getPasswordLevel = function (password) {
            if (password == null || password == '')
                return 0;
            if (password.length <= 4)
                return 0; //密码太短
            var Modes = 0;
            for (i = 0; i < password.length; i++) {
                Modes |= CharMode(password.charCodeAt(i));
            }
            return bitTotal(Modes);
            //CharMode函数 
            function CharMode(iN) {
                if (iN >= 48 && iN <= 57) //数字
                    return 1;
                if (iN >= 65 && iN <= 90) //大写字母
                    return 2;
                if (iN >= 97 && iN <= 122) //小写
                    return 4;
                else
                    return 8; //特殊字符 
            }
            //bitTotal函数
            function bitTotal(num) {
                modes = 0;
                for (i = 0; i < 4; i++) {
                    if (num & 1) modes++;
                    num >>>= 1;
                }
                return modes;
            }
        };
        var viewModel = {
            Password: ko.observable(""),
            Ocolor: "#eeeeee"
        };
        viewModel.PasswordLevel = ko.dependentObservable(function () {
            return Page.Utility.Registration.getPasswordLevel(this.Password());
        }, viewModel);
        viewModel.Lcolor = ko.dependentObservable(function () {
            //根据密码强度判断第一个格显示的背景色
            return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))
        }, viewModel);
        viewModel.Mcolor = ko.dependentObservable(function () {
            //根据密码强度判断第二个格显示的背景色
            return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")
        }, viewModel);
        viewModel.Hcolor = ko.dependentObservable(function () {
            //根据密码强度判断第二个格显示的背景色
            return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"
        }, viewModel);
        $((function () {
            ko.applyBindings(viewModel);
        }));

    </script>
}
<div>
    @*<div id="cartEditor" style=" width:800px; height:auto;">
        <table>
            <thead>
                <tr>
                    <th width="25%">类别</th>
                    <th width="25%">产品</th>
                    <th width="15%" class='price'>价格</th>
                    <th width="10%" class='quantity'>数量</th>
                    <th width="15%" class='price'>总计</th>
                    <th width="10%"></th>
                </tr>
            </thead>
            <tbody data-bind='template: {name: "cartRowTemplate", foreach: lines}'></tbody>
        </table>
        <div style=" width: 800px; height: auto; padding-left: 100px;">
            <p>
                Total value: <span data-bind="text: formatCurrency(grandTotal())"></span>
            </p>
            <br />
            <button data-bind="click: addLine">
                Add product
            </button>
            <button data-bind="click: save">
                Submit order
            </button>
        </div>
    </div>

    <script type="text/html" id="cartRowTemplate">
        <tr style="padding-left: 100px;">
            <td style=" width: 100px; height: auto;"><select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "请选择...", value: category'></select></td>

            <td style=" width: 100px; height: auto;"><select data-bind='visible: category, options: category() ? category().products : null, optionsText: category().products, optionsCaption: "请选择...", value: product'></select></td>

            <td style=" width: 100px; height: auto;"><span data-bind='text: product() ? formatCurrency(product().price) : ""'></span></td>
            <td style=" width: 100px; height: auto;"><input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"' /></td>
            <td style=" width: 100px; height: auto;"><span data-bind='visible: product, text: formatCurrency(subtotal())'></span></td>
            <td><a href="#" data-bind='click: function() { cartViewModel.removeLine($data) }'>Remove</a></td>
        </tr>
    </script>
</div>*@
</div>

<form name="form1" action="" style="width:500px; padding-left:100px;">
    输入密码:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">
    <br>
    密码强度:
    <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
           height="23" style='display: inline'>
        <tr align="center" bgcolor="#eeeeee">
            <td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }">
                弱
            </td>
            <td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }">
                中
            </td>
            <td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }">
                强
            </td>
        </tr>
    </table>
</form>




